<template>
  <div class="wrapper">
    <Main>
      <div class="main-header">
      <!--<div class="wrap-box">-->
          <!--<Input style="width: 100px" search placeholder="Enter something..." />-->
          <!--<Button class="ml-2">搜索</Button>-->
      <!-- </div>-->
      </div>
      <div class="main-table">
        <div class="tab-nav tab-border">
          <div class="l-box">
            <b>分类列表</b>
          </div>
          <div class="r-box">
            <Button type="primary" @click="createOrEdit(0)">新增类别</Button>
          </div>
        </div>
        <div class="tab-wrapper">
          <Table border :columns="columns1" :data="data1"></Table>
        </div>
      </div>
      <Modal
        v-model="visible"
        :title="title">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="类别名称" prop="category">
            <Input v-model="formValidate.category" placeholder="输入类别名称"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="cancelClick">取消</Button>
          <Button type="primary" @click="saveClick">保存</Button>
        </div>
      </Modal>
    </Main>
  </div>
</template>

<style scoped lang="sass">
  @import "../styles/main.sass"
</style>

<script>
import { Input, Button, Table, Modal, Form, FormItem } from 'view-design'
// @ is an alias to /src
import Main from '@/components/Main.vue'

import cs from '../service/category'
import utils from '../utils'

export default {
  components: { Main, Input, Button, Table, Modal, Form, FormItem },
  data () {
    return {
      title: '新增类别',
      visible: false,
      formValidate: {
        id: undefined,
        category: ''
      },
      ruleValidate: {
        category: [
          { required: true, message: '类别不能为空', trigger: 'blur' }
        ]
      },
      columns1: [
        { type: 'index', width: 60, align: 'center' },
        { title: '类别名称', key: 'category' },
        {
          title: '创建时间',
          key: 'createdAt',
          align: 'center',
          render: (h, params) => {
            const val = params.row.createdAt
            if (val) {
              return h('span', utils.formatDate(val) || '')
            } else {
              return h('span', '')
            }
          }
        },
        {
          title: '更新时间',
          key: 'updatedAt',
          align: 'center',
          render: (h, params) => {
            const val = params.row.updatedAt
            if (val) {
              return h('span', utils.formatDate(val) || '')
            } else {
              return h('span', '')
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(Button, {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.createOrEdit(params.row)
                  }
                }
              }, '编辑'),
              h(Button, {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data1: [
      ]
    }
  },
  methods: {
    createOrEdit (row) {
      if (!row) {
        this.title = '新增类别'
        this.formValidate = {
          id: undefined,
          category: ''
        }
      } else {
        this.title = '编辑类别'
        this.formValidate = {
          id: row.id,
          category: row.category
        }
      }
      this.visible = true
    },
    remove (row) {
      // 删除确认
      this.$Modal.confirm({
        title: '确认删除？',
        content: '<p>删除后你可重新添加</p>',
        onOk: () => {
          cs.remove(row.id).then(() => {
            this.$Message.success('操作成功')
            this.request()
          }).catch((resp) => {
            this.$Message.error(resp.message)
          })
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        }
      })
    },
    saveClick () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          if (this.formValidate.id) {
            cs.update(this.formValidate.id, this.formValidate.category).then((resp) => {
              this.successCallback(resp, '更新成功')
            }).catch(this.failCallback)
          } else {
            cs.create(this.formValidate.category).then((resp) => {
              this.successCallback(resp, '创建成功')
            }).catch(this.failCallback)
          }
        }
      })
    },
    successCallback (resp, message) {
      this.$Message.success(message)
      this.cancelClick()
      this.request()
    },
    failCallback (resp) {
      this.$Message.error(resp.message)
    },
    cancelClick () {
      this.$refs.formValidate.resetFields()
      this.visible = false
    },
    request () {
      cs.getAll().then((resp) => {
        this.data1 = resp.data
      }).catch((resp) => {
        this.$Message.error(resp.message)
      })
    }
  },
  created () {
    this.$store.dispatch('active', 'category')
    this.request()
  }
}
</script>
